<template>
    <view>
        <!-- pages/user/balancePay/index.wxml -->
        <!-- 头部 -->
        <navber id="head-navber" :navbarData="navbarData"></navber>

        <view class="pay">
            <view class="price-info" @tap="goToLog">
                <image :src="imgUrl + '/imgs/user/integral/bac.png'" class="price-info-img"></image>
                <view class="price-info-title">- 当前余额 -</view>
                <view class="price-info-number">{{ now_price }}</view>
            </view>
            <view class="pay-title">请选择充值金额</view>
            <view class="pay-price">
                <view :class="'pay-price-item ' + (arrIndex == 0 ? 'pay-price-item-action' : '') + ' '" @tap="select_price($event, { index: '0' })" data-index="0">
                    {{ arrPrice[0] }}元
                </view>
                <view :class="'pay-price-item pay-price-item-marg ' + (arrIndex == 1 ? 'pay-price-item-action' : '')" @tap="select_price($event, { index: '1' })" data-index="1">
                    {{ arrPrice[1] }}元
                </view>
                <view :class="'pay-price-item ' + (arrIndex == 2 ? 'pay-price-item-action' : '')" @tap="select_price($event, { index: '2' })" data-index="2">
                    {{ arrPrice[2] }}元
                </view>
            </view>
            <view class="pay-title">其他充值金额</view>
            <view class="pay-input">
                <input placeholder="请输入您想充值的金额" @input="price_input" type="number" />
            </view>
            <view class="pay-show">
                充值金额：{{ price }}
                <view class="balance-log" @tap="goToLog">余额日志</view>
            </view>
        </view>

        <view class="submit" @tap="confirmPay">
            <view class="submit-but">充值</view>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';
// pages/user/balancePay/index.js
const Api = require('../../../api/index.js');

const Config = require('../../../config/index.js');

export default {
    components: {
        navber
    },
    data() {
        return {
            navbarData: {
                title: '余额充值' //顶部标题
            },
            //导航栏
            imgUrl: Config.imgUrl,
            //图片url
            now_price: 0,
            //当前用户余额
            loginStatus: false,
            //登录状态
            price: 0,
            //充值金额
            arrPrice: [100, 500, 1000],
            arrIndex: 0 //下标
        };
    },
    onLoad() {
        this.setData({
            price: this.arrPrice[this.arrIndex]
        });
        Api.userCore({}).then((res) => {
            if (res.code == 1) {
                this.setData({
                    now_price: res.data.userInfos['pay_price']
                });
            }
        });
    },
    onPullDownRefresh(e) {
        Api.userCore({}).then((res) => {
            if (res.code == 1) {
                this.setData({
                    now_price: res.data.userInfos['pay_price']
                });
            }

            uni.stopPullDownRefresh();
        });
    },
    methods: {
        select_price(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //选择金额
            this.setData({
                price: this.arrPrice[e.currentTarget.dataset.index],
                arrIndex: e.currentTarget.dataset.index
            });
        },

        price_input(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //金额输入
            this.setData({
                price: e.detail.value,
                arrIndex: 404
            });
        },

        confirmPay(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //确认充值
            uni.navigateTo({
                url: '/pages/pay/show/index?pay_price=' + this.price + '&pay_type=recharge'
            });
        },

        //余额支付
        goToLog(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            uni.navigateTo({
                url: '/pages/user/balancePay/list/index'
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
